<template>
  <div class="leftview">
<!--        <img src="../../assets/img/JHlogo.png"> -->
        <div class="quesList">
          <div>
            <p>违规学校数</p>
            <span class="t_num1"></span>
            </div>
          <div>
            <p>发现问题数</p>
            <span class="t_num2"></span>
          </div>
        </div>
  </div>
</template>

<script>
  import $ from "jquery";
  import "../../../static/js/digitalScroll.js";
  import {PatrolPlatform} from "../../request/api"
  export default {
    data() {
      return {
        XCnum:10,
        Quenum:1000,
        set1:'',
        set2:''
      };
    },
    methods:{
      XCques(){
        var sum1 = this.XCnum;
        let that = this;
        $(function() {
        	show_num1(sum1);
        	that.set1 = setInterval(function() {
        		show_num1(sum1);
        	}, 10000);
        });
        function show_num1(n) {
        	if (sum1 <= parseInt(that.XCnum * 1000)) {
        		// sum1 = sum1 +  Math.ceil(Math.random()*9);
            sum1 = sum1 + 1
        		let it = $(".t_num1 i");
        		let len = String(n).length;
        		for (let i = 0; i < len; i++) {
        			if (it.length <= i) {
        				$(".t_num1").append("<i></i>");
        			}
        			var num1 = String(n).charAt(i);
        			//根据数字图片的高度设置相应的值
        			let y = -parseInt(num1) * 60;
        			let obj = $(".t_num1 i").eq(i);
        			obj.animate(
        				{
        					backgroundPosition:
        						"(0 " + String(y) + "px)"
        				},
        				"slow",
        				"swing",
        				function() {}
        			);
        		}
        	} else {
        		clearInterval(that.set1);
        	}
        }
      },
      Quexposure(){
        var sum2 = this.Quenum;
        let that = this;
        $(function() {
        	show_num2(sum2);
        	that.set2 = setInterval(function() {
        		show_num2(sum2);
        	}, 5000);
        });

        function show_num2(n) {
        	if (sum2 <= parseInt(that.Quenum * 2)) {
        		sum2 = sum2 +  Math.ceil(Math.random()*9);
        		let it = $(".t_num2 i");
        		let len = String(n).length;
        		for (let i = 0; i < len; i++) {
        			if (it.length <= i) {
        				$(".t_num2").append("<i></i>");
        			}
        			var num1 = String(n).charAt(i);
        			//根据数字图片的高度设置相应的值
        			let y = -parseInt(num1) * 60;
        			let obj = $(".t_num2 i").eq(i);
        			obj.animate(
        				{
        					backgroundPosition:
        						"(0 " + String(y) + "px)"
        				},
        				"slow",
        				"swing",
        				function() {}
        			);
        		}
        	} else {
        		clearInterval(that.set2);
        	}
        }
      },
      GetPatrolPlatform(){
        PatrolPlatform({
            code:'all',
            AppId:this.$getParams('appid'),
            EBCOrganizationId:'',
            UserId:this.$getParams('userid')
        }).then((res)=>{
          console.log(res)
           res.SCater.Data.PatrolPlatform_A.forEach((res)=>{
              if(res.StatType == "违规学校数"){
                clearInterval(this.set1)
                this.XCnum = 0
                this.XCnum = res.Num
                 this.XCques()
              }else if(res.StatType == "问题曝光数"){
                 clearInterval(this.set2)
                 this.Quenum = 0
                this.Quenum = res.Num
                 this.Quexposure()
              }
             })
           })
        }
    },
    created() {
      this.GetPatrolPlatform()
      this.XCques()
      this.Quexposure()
    }
  };
</script>

<style>
  .leftview{
    position: absolute;
    left:50px;
    width:450px;

  }
  .leftview .quesList p{
    font-size: 40px;
        color: hsla(195, 100%, 50%, 1);
        padding-top: 80px;
  }
    .t_num1,.t_num2{
      display: block;
      margin-top: 20px;
      height: 65px;
      overflow: hidden;
    }
  .t_num1 i {
  	width: 55px;
  	height: 60px;
  	margin-right: 10px;
  	display: inline-block;
  	background: url("../../assets/img/img1.png") no-repeat;
  	background-position: 0 0;
  }
  .t_num2 i {
  	width: 55px;
  	height: 60px;
  	margin-right: 10px;
  	display: inline-block;
  	background: url("../../assets/img/img2.png") no-repeat;
  	background-position: 0 0;
  }
</style>
